<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/fonts.css">
</head>
<body>
    <div class="container">
        <div class="top clearfix">
            <div class="header clearfix">
                <div class="logo"><img src="images/logo.png" height="70px"></div>
                <ul class="clearfix">
                    <li class="active"><span>首页</span><i></i></li>
                    <li><span>产品中心</span><i></i></li>
                    <li><span>新闻资讯</span><i></i></li>
                    <li><span>关于沁园</span><i></i></li>
                    <li><span>联系我们</span><i></i></li>
                    <li><span>网上商城</span><i></i></li>
                </ul>
                <div class="search"><img src="images/search.png" height="19px"></div>
            </div>
        </div>
        
        <div class="carousel clearfix">
            <input id="one" type="radio" name="carousel" checked>
            <input id="two" type="radio" name="carousel">
            <input id="three" type="radio" name="carousel">
            <ul>
                <li><img src="images/carousel02.png"></li>
                <li><img src="images/carousel03.png"></li>
                <li><img src="images/carousel01.png"></li>
            </ul>
            <div class="text">
                <h6>沁园 20年专注净水</h6>
                <span>保障全家饮上优质健康水</span>
            </div>
            <p class="clearfix">
                <label for="one"></label>
                <label for="two"></label>
                <label for="three"></label>
            </p>
        </div>

        <div class="product">
            <div class="box">
                <div class="product-title">
                    <h4>沁园产品</h4>
                    <p>Product Center</p>
                </div>
                <div class="product-nav">
                    <ul class="clearfix">
                        <li><span>厨房净饮水</span></li>
                        <li><span>客厅净饮水</span></li>
                        <li><span>全屋净化系列</span></li>
                        <li><span>小型净水器</span></li>
                        <li><span>商用净水器</span></li>
                    </ul>
                </div>
                <div class="product-main clearfix">
                    <div class="product-case">
                        <img src="images/product.png">
                        <p>沁园QR-RL-403</p>
                        <span>Read More <i>→</i></span>
                    </div>
                    <div class="product-case">
                        <img src="images/product.png">
                        <p>沁园QR-RL-403</p>
                        <span>Read More <i>→</i></span>
                    </div>
                    <div class="product-case">
                        <img src="images/product.png">
                        <p>沁园QR-RL-403</p>
                        <span>Read More <i>→</i></span>
                    </div>
                    <div class="product-case">
                        <img src="images/product.png">
                        <p>沁园QR-RL-403</p>
                        <span>Read More <i>→</i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="new">
            <div class="box clearfix">
                <div class="new-case">
                    <div class="new-title">
                        <h5>新闻资讯</h5>
                        <p>News Information</p>
                    </div>
                    <div class="new-case-space clearfix">
                        <div class="new-image">
                            <img src="images/news.png">
                            <h6>2018开年捷报沁园斩获“年度净水器品牌”大奖！</h6>
                        </div>
                        <div class="new-case-text">
                            <ul>
                                <li><p><a href="#">新中产阶级时代来临 品质消费升级催动高端净水崛起</a><i>03-16</i></p</li>
                                <li><p><a href="#">沁园中央净水器的用途及特点</a><i>03-16</i></p</li>
                                <li><p><a href="#">2018匠心当先 沁园20年专注净水再迎品牌升级</a><i>03-16</i></p</li>
                                <li><p><a href="#">沁园又双叒叕获奖了！</a><i>03-16</i></p</li>
                                <li><p><a href="#">沁园家用净水器邀修杰楷助力公益 关爱缺水山区儿童</a><i>03-16</i></p</li>
                                <li><p><a href="#">沁园家用净水器邀修杰楷助力公益 关爱缺水山区儿童</a><i>03-16</i></p</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="new-right">
                    <div class="new-title">
                        <h5>快捷服务</h5>
                        <p>Recommend</p>
                    </div>
                    <div class="new-right-case clearfix">
                        <div class="new-small-case new-active">
                            <img src="images/order.png">
                            <p>预约安装</p>
                        </div>
                        <div class="new-small-case">
                            <img src="images/problem.png">
                            <p>常见问题</p>
                        </div>
                        <div class="new-small-case">
                            <img src="images/post-sale.png">
                            <p>售后服务</p>
                        </div>
                        <div class="new-small-case">
                            <img src="images/customer-service.png">
                            <p>联系我们</p>
                        </div>
                    </div>
                </div>
            </div>   
        </div>
        <div class="footer">
            <div class="box clearfix">
                <div class="footer-top">
                    <div class="footer-left">
                        <ul class="clearfix">
                            <li><span>首页</span><i>|</i></li>
                            <li><span>产品中心</span><i>|</i></li>
                            <li><span>新闻资讯</span><i>|</i></li>
                            <li><span>关于我们</span><i>|</i></li>
                            <li><span>联系我们</span><i>|</i></li>
                            <li><span>网上商城</span></li>
                        </ul>
                        <p>地址： 江西省南昌市红谷滩学府大道899号慧谷创意产业园A座3楼</p>
                        <p>技术支持： 江西华邦</p>
                    </div>
                    <div class="footer-right">
                        <span>全国统一服务热线</span>
                        <p>400-0791-666</p>
                        <div class="weixin-pic">
                            <i class="icon-weixin">&#xe6b9;</i>
                        </div>
                    </div>
                </div>
                <div class="footer-bottom">
                    <p><span>友情链接： 百度江西</span> <i>版权所有 &copy;2018-2020 江西华邦传媒有限公司</i></p>
                </div>
            </div>
        </div>
    </div>
   

</body>
</html>